<template>
  <el-dialog
    :title="'流程设计'"
    :width="width"
    :visible.sync="isVisible"
    class="user-workflow"
  >
    <i-frame :src="workflowUrl" />
    <!-- <div slot="footer" class="dialog-footer">
      <el-button type="warning" plain :loading="buttonLoading" @click="isVisible = false">
        {{ $t('common.cancel') }}
      </el-button>
      <el-button type="primary" plain :loading="buttonLoading" @click="submitForm">
        {{ $t('common.confirm') }}
      </el-button>
    </div> -->
  </el-dialog>
</template>
<script>
import { validMobile } from "@/utils/my-validate";
import iFrame from "@/components/iFrame";
// import { workflowUrl } from "@/settings";

export default {
  name: "Workflow",
  components: { iFrame },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      actReModel: {},
      screenWidth: 0,
      buttonLoading: false,
      workflowUrl: "",
      width: this.initWidth()
    };
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible;
      },
      set() {
        this.close();
      }
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth();
      })();
    };
  },
  methods: {
    setUser(val) {
      this.actReModel = { ...val };
      this.workflowUrl =
        "http://localhost:18007/editor?modelId=" + this.actReModel.id;
    },
    initWidth() {
      this.screenWidth = document.body.clientWidth;
      if (this.screenWidth < 991) {
        return "90%";
      } else if (this.screenWidth < 1400) {
        return "70%";
      } else {
        return "1400px";
      }
    },
    close() {
      this.$emit("close");
    },
    submitForm() {
      this.isVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped></style>
